<template>
  <div class="system-monitoring">
    <el-row :gutter="20">
      <el-col :span="24">
        <collapsible-card title="Health" :defaultCollapsed="false">
          <pre>{{ JSON.stringify(health, null, 2) }}</pre>
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Info" :defaultCollapsed="false">
          <pre>{{ JSON.stringify(info, null, 2) }}</pre>
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Metrics" :defaultCollapsed="true">
          <pre>{{ JSON.stringify(metrics, null, 2) }}</pre>
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Environment" :defaultCollapsed="true">
          <pre>{{ JSON.stringify(env, null, 2) }}</pre>
        </collapsible-card>
      </el-col>
      <el-col :span="24">
        <collapsible-card title="Beans" :defaultCollapsed="true">
          <pre>{{ JSON.stringify(beans, null, 2) }}</pre>
        </collapsible-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from '../plugins/axios'
import CollapsibleCard from './CollapsibleCard.vue'
import JsonViewer from 'vue3-json-viewer'
import 'vue3-json-viewer/dist/index.css'

const health = ref({})
const info = ref({})
const metrics = ref({})
const env = ref({})
const beans = ref({})

const fetchData = async (url, target) => {
  try {
    const response = await axios.get(url)
    target.value = response.data
  } catch (error) {
    console.error(`Failed to fetch ${url}:`, error)
  }
}

onMounted(() => {
  fetchData('/admin/health', health)
  fetchData('/admin/info', info)
  fetchData('/admin/metrics', metrics)
  fetchData('/admin/env', env)
  fetchData('/admin/beans', beans)
})
</script>


<style scoped>
/* 为每个卡片列设置间距 */
.card-column {
  margin-bottom: 20px; /* 设置上下间距，让卡片更宽松 */
}

/* 可以设置一个全局最大宽和居中显示 */
.system-monitoring {
  padding: 20px; /* 为整体留出内边距，避免内容贴近窗口边缘 */
}

.collapsible-card {
  border-radius: 6px; /* 增加卡片圆角（可选） */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 卡片加轻微阴影（可选） */
}
</style>